<template>
  <div class="mui-content mh-container pd pb">
    <mh-header headName="订单" :showBack="showBack"> </mh-header>
    <div class="mui-segmented-control mh-segmented">
      <a class="mui-control-item mui-active"><span>新订单</span></a>
      <a class="mui-control-item"><span>已送货</span></a>
      <a class="mui-control-item"><span>已签收</span></a>
      <a class="mui-control-item"><span>退货申请</span></a>
    </div>
    <div class="nav-tab flex-bt mh-pd bg-w">
      <span :class="{active: selTabActive === 1}" @tap="handleActiveTab(1)">全部</span>
      <span :class="{active: selTabActive === 2}" @tap="handleActiveTab(2)">互动</span>
      <span :class="{active: selTabActive === 3}" @tap="handleActiveTab(3)">服务</span>
      <span :class="{active: selTabActive === 4}" @tap="handleActiveTab(4)">产品</span>
    </div>
    <div class="o-list bg-w">
      <div class="o-item mh-pd" v-for="item in orderList" :key="item.id">
        <div class="o-top">
          <p class="mui-text-right status">
            <span v-if="item.status === 1">新订单</span>
            <span v-if="item.status === 2">已送货</span>
            <span v-if="item.status === 3">已签收</span>
            <span v-if="item.status === 4">退货申请</span>
          </p>
          <div class="o-info flex" @tap="orderDetail(item.id)">
            <div class="info-l">
              <div class="pic-box">
                <img :src="item.image" alt="商品图片">
              </div>
            </div>
            <div class="info-r">
              <p class="g-desc" v-text="item.des">商品名称</p>
              <p class="price" v-text="`￥${item.goods_price}`">￥-</p>
              <p class="flex-bt g-size">
                <span>规格</span>
                <span v-text="`x${item.specifications}`">x1</span>
              </p>
            </div>
          </div>
        </div>
        <div class="o-bottom flex-bt mh-mg-tb">
          <div class="bt-l g-total">共{{item.num}}件商品 合计：￥{{item.payment}}(含运费)</div>
          <div class="bt-r">
            <button type="button" class="btn-invert" v-if="item.status === 1">确定送货</button>
            <!--<button type="button" class="btn-invert" v-if="item.status === 4" @tap="returnGoods(item.id)">退货</button>-->
            <button type="button" class="btn-def" v-if="item.status === 1">发物流</button>
            <button type="button" class="btn-def" v-if="item.status === 4">查看原因</button>
          </div>
        </div>
      </div>
    </div>
    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import TabMenu from '@/components/tab-menu/hn-tab'
  import {MH_API} from "@/api/api";
  export default {
    data () {
      return {
        showBack: false,
        activeFootTab: 5,
        orderList: [
          // {
          //   id: '1',
          //   pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          //   des: '八字合婚测试',
          //   price: '198',
          //   size: 1,
          //   totalNum: 1,
          //   totalPrice: 198,
          //   status: 1
          // },
        ],
        selTabActive: 1
      }
    },
    methods: {
      orderDetail (id) {
        this.$router.push({path: '/profile/order/'+id, params: {id: id}})
      },
      returnGoods (id) {
        this.$router.push({path: '/profile/returnGoods', params: {id: id}})
      },
      handleActiveTab (i) {
        this.selTabActive = i;
      },
      getData(type){
        let self = this;
        let params = {
          type: type,
          is_hong: 1
        };
        MH_API.orderList(params).then(res => {
          if (res.status === 200) {
            self.orderList = res.data;
          }
        })
      }
    },
    components: {
      MhHeader,
      TabMenu
    },
    created(){
      this.getData(0);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    margin: 0;
    @include mh-avatar-box(8.4rem, 8.4rem);
    border-radius: 0;
  }
  .o-item {border-bottom: 1px solid #eee;}
  .status {@include sc(1.2rem, #eb537f);}
  .info-r {
    margin-left: .5rem;
    .price {
      margin-bottom: .5rem;
      @include sc(1.4rem, #f26c60);
    }
  }
  .g-desc {
    margin-bottom: .5rem;
    @include sc(1.5rem, #333);
  }
  .g-size {@include sc(1.2rem, #666);}
  .g-total {@include sc(1.2rem, #666);}
  .bt-r {
    button {
      min-width: 6.2rem;
      padding: .4rem .6rem;
      border-radius: 1.1rem;
    }
    .btn-invert {
      @include sc(1.2rem, #dd65a1);
      border: 1px solid #dd65a1;
    }
    .btn-def {
      @include sc(1.2rem, #fff);
      background: #e685aa;
    }
  }
  .nav-tab>span {
    display: inline-block;
    padding: .2rem 1rem;
    background: #fcf3f6;
    border-radius: 1.3rem;
    @include sc(1.2rem, #e685aa);
    &.active {
      background: #e685aa;
      color: #fff;
    }
  }
</style>
